:root {
  /***
    *HEX Values*
  ***/

  /* Black & White */
  --black: #000;
  --white: #fff;

  /* Gray */
  --gray-10: #f4f4f4;
  --gray-20: #e0e0e0;
  --gray-30: #c6c6c6;
  --gray-40: #a8a8a8;
  --gray-50: #8d8d8d;
  --gray-60: #6f6f6f;
  --gray-70: #525252;
  --gray-80: #393939;
  --gray-90: #262626;
  --gray-100: #161616;
  --gray-10-hover: #e8e8e8;
  --gray-20-hover: #d1d1d1;
  --gray-30-hover: #b5b5b5;
  --gray-40-hover: #999;
  --gray-50-hover: #7a7a7a;
  --gray-60-hover: #5e5e5e;
  --gray-70-hover: #636363;
  --gray-80-hover: #474747;
  --gray-90-hover: #333;
  --gray-100-hover: #292929;

  /* Cobalt */
  --cobalt-1: #f5f4f5;
  --cobalt-5: #e1e3f5;
  --cobalt-10: #c2c6ea;
  --cobalt-20: #a4aadf;
  --cobalt-30: #7a83d1;
  --cobalt-40: #5f6ac8;
  --cobalt-50: #3643ba;
  --cobalt-60: #313daa;
  --cobalt-70: #262f82;
  --cobalt-80: #1e2567;
  --cobalt-90: #171c4f;

  /* Conifer */
  --conifer-5: #eafbe8;
  --conifer-10: #cbf0c7;
  --conifer-20: #88d77f;
  --conifer-30: #74c76a;
  --conifer-40: #23a942;
  --conifer-50: #41a036;
  --conifer-60: #378d2e;
  --conifer-70: #256c1d;

  /* Violet */
  --violet-40: #be95ff;
  --violet-50: #a56eff;
  --violet-60: #8a3ffc;

  /* Purple */
  --purple-5: #f2edf2;
  --purple-10: #dccfdd;
  --purple-20: #ac8daf;
  --purple-30: #966f9a;
  --purple-40: #6c4e6f;
  --purple-50: #5b415d;
  --purple-60: #49354b;
  --purple-70: #2c202d;

  /* Red */
  --red-5: #feeced;
  --red-10: #fec9cb;
  --red-20: #fd9297;
  --red-30: #fd7278;
  --red-40: #e3262f;
  --red-50: #ab0009;
  --red-60: #870007;
  --red-70: #5a0005;
  --red-30-hover: #df484e;
  --red-40-hover: #c21720;
  --red-50-hover: #8d0009;

  /* Mint */
  --mint-5: #f0fff4;
  --mint-10: #d6ffe3;
  --mint-20: #c2ffd6;
  --mint-30: #a8ffc5;
  --mint-40: #94ffb8;
  --mint-50: #7affa6;
  --mint-60: #6ee797;
  --mint-70: #58b678;
  --mint-80: #149b65;
  --mint-90: #336b46;

  /* Orange */
  --orange-5: #fff3ed;
  --orange-10: #ffe4d6;
  --orange-20: #fac3a5;
  --orange-30: #fa9c69;
  --orange-40: #db6900;
  --orange-50: #c15e29;
  --orange-60: #9a4b21;
  --orange-70: #673216;

  /* Gold */
  --gold-5: #fffcf5;
  --gold-10: #fff1cc;
  --gold-20: #ffe9b2;
  --gold-30: #ffdb80;
  --gold-40: #ffcd4e;
  --gold-50: #e5a500;
  --gold-60: #bd8700;
  --gold-70: #805b00;

  /***
    *RGB Values*
  ***/

  /* Black & White */
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;

  /* Gray */
  --gray-10-rgb: 244, 244, 244;
  --gray-20-rgb: 224, 224, 224;
  --gray-30-rgb: 198, 198, 198;
  --gray-40-rgb: 168, 168, 168;
  --gray-50-rgb: 141, 141, 141;
  --gray-60-rgb: 111, 111, 111;
  --gray-70-rgb: 82, 82, 82;
  --gray-80-rgb: 57, 57, 57;
  --gray-90-rgb: 38, 38, 38;
  --gray-100-rgb: 22, 22, 22;
  --gray-10-hover-rgb: 232, 232, 232;
  --gray-20-hover-rgb: 209, 209, 209;
  --gray-30-hover-rgb: 181, 181, 181;
  --gray-40-hover-rgb: 153, 153, 153;
  --gray-50-hover-rgb: 122, 122, 122;
  --gray-60-hover-rgb: 94, 94, 94;
  --gray-70-hover-rgb: 99, 99, 99;
  --gray-80-hover-rgb: 71, 71, 71;
  --gray-90-hover-rgb: 51, 51, 51;
  --gray-100-hover-rgb: 41, 41, 41;

  /* Cobalt */
  --cobalt-1-rgb: 245, 244, 245;
  --cobalt-5-rgb: 236, 237, 248;
  --cobalt-10-rgb: 194, 198, 234;
  --cobalt-20-rgb: 164, 170, 223;
  --cobalt-30-rgb: 122, 131, 209;
  --cobalt-40-rgb: 95, 106, 200;
  --cobalt-50-rgb: 54, 67, 186;
  --cobalt-60-rgb: 49, 61, 170;
  --cobalt-70-rgb: 38, 47, 130;
  --cobalt-80-rgb: 30, 37, 103;
  --cobalt-90-rgb: 23, 28, 79;
}
